<html lang="zh">

<head>
	<script>
		console.log("%c ", "background: url(https://gitee.com/coco-ag/coco-waddle/raw/master/static/img/cs.png);padding:14px 100px;background-size: contain;background-repeat: no-repeat;")
		console.log("%c嘿，欢迎使用 Waddle!","font-size:13px;color:rgb(222,154,81)")
		console.log("%c\n本工具基于Blockly开发，由 中子星000（QQ：2422481178）主理制作、\nEpeiuss（Mail：ffxw0720@163.com）与海藻酸钠（QQ：3409473369）监制\n\n特别鸣谢：https://gitee.com/coco-ag/coco-waddle/contributors?ref=master","font-size:15px;color:rgb(179,222,255)")
		console.log("%c\n欢迎各位进入开源仓库参与建设：https://gitee.com/coco-ag/coco-waddle/\n建议或特性反馈链接：https://www.yuque.com/forms/share/21daa75d-9aac-4887-8eb9-77dd20e658ec","font-size:14px;color:rgb(42,125,255)")
		console.log("%cV1.1.45.14-dev  ©️ 2022 CoCo Central, All rights reserved.","color:red;")
	</script>

	<!--引入Blockly必要文件-->
	<script src="{{static_url('blockly-master/blockly_compressed.js')}}"></script>
	<script src="{{static_url('blockly-master/javascript_compressed.js')}}"></script>
	<script src="{{static_url('blockly-master/blocks_compressed.js')}}"></script>
	<script src="{{static_url('blockly-master/msg/js/zh-hans.js')}}"></script>

	<meta charset="utf-8">
	<link rel="shortcut icon" href="{{static_url('img/logo.svg')}}">
	<title>Waddle - 让CoCo没有难做的控件</title>

	<!--图标库-->
	<script src="{{static_url('icons/waddle/iconfont.js')}}"></script>


	<!--定义Blocks-->
	<!-- <script src="static/blockly-master/blocks/invisibleWidget.js"></script> -->
	<!-- <script src="static/blockly-master/blocks/coco.js"></script> -->
	<script src="{{static_url('blockly-master/blocks/js.js')}}"></script>

	<!--Blocks 对应代码-->
	<!-- <script src="static/blockly-master/generators/javascript/invisibleWidget.js"></script> -->
	<!-- <script src="static/blockly-master/generators/javascript/coco.js"></script> -->
	<script src="{{static_url('blockly-master/generators/javascript/js.js')}}"></script>

	<!--引入框架-->
	<script src="{{static_url('js/jquery-3.4.1.min.js')}}"></script>
	<script src="{{static_url('js/bootstrap.bundle.min.js')}}"></script>
	<link href="{{static_url('css/bootstrap.min.css')}}" rel="stylesheet">

    <!--引入高亮-->
	<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/9.12.0/styles/googlecode.min.css" rel="stylesheet">

	<!--自定义Blockly样式-->
	<script src="{{static_url('Waddle/custom_category.js')}}"></script>
	<link href="{{static_url('css/blockly_style.css')}}" rel="stylesheet" />
	<!--包含toolbox和积木-->

	<!--自定义积木样式-->
	<script src="{{static_url('Waddle/custom_renderer.js')}}"></script>

	<!--自定义网格样式-->
	<script src="{{static_url('Waddle/custom_grid.js')}}"></script>

	<!--引入Waddle主题-->
	<script src="{{static_url('Waddle/core/theme/waddleTheme.js')}}"></script>

	<!--引入tools积木-->
	<script src="{{static_url('Waddle/blocks/tools.js')}}"></script>
	<script src="{{static_url('Waddle/generators/javascript/tools.js')}}"></script>

	<!--JavaScript积木-->
	<script src="{{static_url('blockly-master/blocks/js.js')}}"></script>
	<script src="{{static_url('blockly-master/generators/javascript/js.js')}}"></script>

	<!--JavaScript积木-->
	<script src="{{static_url('blockly-master/blocks/html.js')}}"></script>
	<script src="{{static_url('blockly-master/generators/javascript/html.js')}}"></script>


	<!--不可见控件积木-->
	<script src="{{static_url('Waddle/blocks/invisibleWidget.js')}}"></script>
	<script src="{{static_url('Waddle/generators/javascript/invisibleWidget.js')}}"></script>

	<!--导入导航栏按钮函数-->
	<script src="{{static_url('js/navFuncs.js')}}"></script>

	<link rel="stylesheet" href="//at.alicdn.com/t/font_3193112_l62ftr4pl4h.css">
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<!--彩蛋定义-->
	<script>
		function estchk() {
			if (document.cookie.includes("easter")) {
				swal("恭喜，你貌似触发了彩蛋！")
				.then((value) => {
					swal("马上去彩蛋！", {buttons: ["取 消", "确 认"],})
					.then((value) => {
						if (value){
							window.location.href = "./static/Waddle/eastegg/index.html";
						}
					})
				})
				
			} else {
				document.cookie = "easter=1";
			}
		}
	</script>

	<style>
		.nav-item {
			font-size: 25px;
		}
	</style>

	<!--修复Issue-->
	<link href="{{static_url('css/index.css')}}" rel="stylesheet">
</head>

<body>
	<nav class="navbar navbar-expand navbar-dark" style="background-color: #6d50f0;">
		<div class="container-fluid">
			<a class="navbar-brand" href="#"><img id="logo" src="{{static_url('img/waddle.svg')}}"
					style="height: 30px;padding-left: 15px;padding-bottom: 3px;" alt="Waddle" onClick="estchk()" /></a>
			
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav">
					<li class="nav-item dropdown">
						<a id="navbarDropdown" class="nav-link" href="#" role="button" title=""
							data-bs-toggle="dropdown" one-link-mark="yes"><svg xmlns="http://www.w3.org/2000/svg"
								width="26" height="25" fill="currentColor" viewBox="0 0 130 125">
								<path id="联合_1" data-name="联合 1"
									d="M7,125a7,7,0,0,1-7-7V57a7,7,0,0,1,7-7H123a7,7,0,0,1,7,7v61a7,7,0,0,1-7,7ZM4.667,35A4.667,4.667,0,0,1,0,30.334V7A7,7,0,0,1,7,0H48.823A20,20,0,0,1,68.6,17h48.067A13.334,13.334,0,0,1,130,30.334,4.667,4.667,0,0,1,125.333,35Z" />
							</svg></a>
						<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
							<li><a class="dropdown-item" href="javascript:void(0)" onClick='newsth.style.display = "block"'>新建</a></li>
							<li><a class="dropdown-item" href="javascript:void(0)" onClick="save()">保存到电脑</a></li>
							<li><a class="dropdown-item" href="javascript:void(0)" onClick="openfile()">打开Waddle文件</a>
							</li>
							<div style="height: 1px;background-color: #f2f2f2;margin: 0 10px;"></div>
							<li><a class="dropdown-item" href="javascript:void(0)" onClick="js_save()">另存为js文件</a></li>
						</ul>
					</li>
					<li class="nav-item">
						<a id="switch_table" class="nav-link active" href="javascript:void(0)" onclick="switch_table()"
							title="工作区">
							<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
								viewBox="0 0 130 130">
								<path id="积木"
									d="M130,114.534a5.122,5.122,0,0,1-5.117,5.212H58.948a4.857,4.857,0,0,0-3.667,1.538l-7.249,7.177A4.942,4.942,0,0,1,44.364,130H33.176a4.942,4.942,0,0,1-3.667-1.538l-7.249-7.177a4.772,4.772,0,0,0-3.582-1.538H5.118A5.122,5.122,0,0,1,0,114.534V72.923A5.122,5.122,0,0,1,5.118,67.8h13.39a5.2,5.2,0,0,1,3.667,1.453L29.509,76.6a4.942,4.942,0,0,0,3.667,1.538H44.364A4.942,4.942,0,0,0,48.031,76.6l7.334-7.348A5.2,5.2,0,0,1,59.033,67.8h65.849A5.122,5.122,0,0,1,130,72.923Zm-13.008-67.8a5.207,5.207,0,0,1-5.2,5.212H58.948a4.857,4.857,0,0,0-3.667,1.538l-7.249,7.177A4.942,4.942,0,0,1,44.364,62.2H33.176a4.942,4.942,0,0,1-3.667-1.538l-7.249-7.177a4.772,4.772,0,0,0-3.582-1.538H5.118A5.122,5.122,0,0,1,0,46.738V5.127A5.122,5.122,0,0,1,5.118,0h13.39a5.2,5.2,0,0,1,3.667,1.453L29.509,8.8a4.942,4.942,0,0,0,3.667,1.538H44.364A4.942,4.942,0,0,0,48.031,8.8l7.334-7.348A5.2,5.2,0,0,1,59.033,0h52.755a5.122,5.122,0,0,1,5.2,5.127Z"
									transform="translate(0 0)" />
							</svg>
						</a>
					</li>
					<li class="nav-item">
						<a id="switch_code" class="nav-link" href="javascript:void(0)" title="转换代码">
							<svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" fill="currentColor"
								viewBox="0 0 130 125">
								<path id="减去_1" data-name="减去 1"
									d="M123,125H7a7.008,7.008,0,0,1-7-7V7A7.008,7.008,0,0,1,7,0H123a7.008,7.008,0,0,1,7,7V118A7.008,7.008,0,0,1,123,125ZM69.814,69.944a7.008,7.008,0,0,0-7,7v1a7.008,7.008,0,0,0,7,7h36a7.008,7.008,0,0,0,7-7v-1a7.008,7.008,0,0,0-7-7ZM27.793,19.565a6.954,6.954,0,0,0-4.95,2.05l-.707.707a7,7,0,0,0,0,9.9L42.207,52.293,22.43,72.071a7.008,7.008,0,0,0,0,9.9l.706.707a7,7,0,0,0,9.9,0L58.492,57.222a7.008,7.008,0,0,0,0-9.9l-.707-.707c-.155-.155-.315-.3-.476-.435L32.743,21.615A6.954,6.954,0,0,0,27.793,19.565Z" />
							</svg>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="https://www.yuque.com/appcraft/waddle" title="关于"
							target="_blank" onclick="count()">
							<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" fill="currentColor"
								viewBox="0 0 135 135">
								<path id="circle-question-solid"
									d="M67.5,0A67.5,67.5,0,1,0,135,67.5,67.495,67.495,0,0,0,67.5,0Zm0,103.469a8.33,8.33,0,0,1-8.437-8.437A8.188,8.188,0,0,1,67.5,86.594a8.438,8.438,0,0,1,0,16.875ZM85.72,66.027,73.828,73.41v.527a6.328,6.328,0,0,1-12.656,0V69.719a6.5,6.5,0,0,1,3.164-5.537l15.029-8.965a5.653,5.653,0,0,0,2.9-5.01,6.062,6.062,0,0,0-6.038-5.8H62.754a5.7,5.7,0,0,0-5.8,5.8,6.328,6.328,0,0,1-12.656,0A18.293,18.293,0,0,1,62.517,31.75H75.99c10.758,0,18.932,8.174,18.932,18.457A18.517,18.517,0,0,1,85.72,66.027Z" />
							</svg>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="javascript:void(0)" title="主题" onclick="switch_theme()">
							<svg id="theme" xmlns="http://www.w3.org/2000/svg" width="23.5706" height="26.4" fill="currentColor" viewBox="0 0 135 135">
                                <path id="moon-solid_3_" data-name="moon-solid (3)" d="M32,98A65.973,65.973,0,0,1,97.941,32a79.615,79.615,0,0,1,12.051,1.1,3.1,3.1,0,0,1,.966,5.728,51.7,51.7,0,0,0,35.216,95.734,3.1,3.1,0,0,1,2.979,4.994A65.919,65.919,0,0,1,32,98Z" transform="translate(-32 -32)"/>
                            </svg>
						</a>
					</li>
					<!--菜单栏图标全由海藻酸钠绘制-->
				</ul>
			</div>
		</div>
	</nav>

	<div id="table">
		<div id="blocklyDiv" style="width:calc(100vw);"></div>
		<!--ToolBox积木-->
		<xml id="toolbox" style="display: none;width:calc(100vw);">
		</xml>
		<!--工作区积木-->
		<xml id="workspaceblocks" style="display: none">
		</xml>
	</div>
	<script>
	if ($(window).width() < 576){
				logo.src = "{{static_url('img/logo.svg')}}";
			}
			else{
				logo.src = "{{static_url('img/waddle.svg')}}";
			}
	document.body.style.overflow = 'hidden' //禁止页面滑动
	function createjscssfile(filename, filetype){undefined
        if (filetype=="js"){undefined
            var fileref=document.createElement('script')
            fileref.setAttribute("type","text/javascript")
            fileref.setAttribute("src", filename)
        }
        else if (filetype=="css"){undefined
            var fileref=document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
        }
        return fileref
    }
    function replacejscssfile(oldfilename, newfilename, filetype){undefined
        var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"
        var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"
        var allsuspects=document.getElementsByTagName(targetelement)
        for (var i=allsuspects.length; i>=0; i--){undefined
            if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){undefined
                var newelement=createjscssfile(newfilename, filetype)
                allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
            }
        }
    }
	</script>
	<script>
		//加载工作区
		//积木盒
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari，旧版IE代码已删除

			xmlhttp = new XMLHttpRequest();

		}
		else {
			swal('你就别用了吧！你这浏览器不行啊！换一个或升级，谢谢！')
		}

		xmlhttp.open("GET", "{{static_url('Waddle/toolBox.xml')}}", false);

		xmlhttp.send();

		xmlDoc = xmlhttp.responseXML;
		toolbox = document.getElementById('toolbox');
		toolbox.innerHTML = xmlDoc.getElementsByTagName('toolbox')[0].innerHTML;

		//工作区
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari，旧版IE代码已删除

			xmlhttp = new XMLHttpRequest();

		}
		else {
			swal('你就别用了吧！你这浏览器不行啊！换一个或升级，谢谢！')
		}
		xmlhttp.open("GET", "{{static_url('Waddle/workspace.xml')}}", false);

		xmlhttp.send();

		xmlDoc = xmlhttp.responseXML;
		workspaceblocks = document.getElementById('workspaceblocks');
		workspaceblocks.innerHTML = xmlDoc.getElementsByTagName('workspaceblocks')[0].innerHTML;

		var workspaceBlocks = document.getElementById("workspaceblocks");

		//定义主题
		var theme = WaddleTheme;
		//工作区
		var workspace = Blockly.inject('blocklyDiv',
			{
				toolbox: document.getElementById('toolbox'),
				grid: CustomGrid,
				zoom:
				{
					controls: true,
					wheel: true,
					startScale: 0.8,
					maxScale: 3,
					minScale: 0.3,
					scaleSpeed: 1.2
				},
				theme: theme,
				renderer: 'zelos' //scratch风格，自定义的是custom_renderer
			});

		/* 加载初始积木 */
		Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);

	</script>
	<script>
		//各种函数
		/* 搬迁了，在static/js/navFuncs.js */

		window.onbeforeunload = function () {
			return "离开后，你的控件就没啦！";
		}
		// document.getElementById('read').addEventListener('change', function selectedFileChanged() {
		//     if (this.files.length !== 0) {
		//         workspace.clear()
		//         const reader = new FileReader();
		//         reader.onload = function fileReadCompleted() {
		//             const xml = Blockly.Xml.textToDom(reader.result);
		//             Blockly.Xml.domToWorkspace(xml, workspace);
		//         };
		//         reader.readAsText(this.files[0]);
		//     }
		// });
	</script>
	<script>
		//获取cookie
        function getCookie(cname)
        {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) 
            {
                var c = ca[i].trim();
                if (c.indexOf(name)==0) return c.substring(name.length,c.length);
            }
            return "";
        }
	</script>
	<script>
		let logo = document.getElementById("logo");
		$(window).resize(function () {
			if ($(window).width() < 576){
				logo.src = "{{static_url('img/logo.svg')}}";
			}
			else{
				logo.src = "{{static_url('img/waddle.svg')}}";
			}
		});
		$(window).resize(function () {
			document.getElementById("table").style.height = (document.body.clientHeight - 57);
			document.getElementById("toolbox").style.height = (document.body.clientHeight - 57);
			Blockly.svgResize(workspace);
		});
	</script>
	<a href="" download="" style="display: none;" id="downa" aria-label="下载"></a>
	<style>
		.js_button {
			padding: 10px;
		}

		.nav {
			height: 5%;
		}

		.nav-item {
			height: 5%;
			margin-left: 20px;
		}

		.nav-link {
			height: 5%;
		}

		*::-webkit-scrollbar {
			display: none;
		}

		* {
			scrollbar-width: none;
			-ms-overflow-style: none;
		}

		.nav-item:hover {
			border-radius: 10%;
		}
		.iconfont {
			font-family: "iconfont" !important;
			font-size: 18px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
  		}
		.swal-footer {
  			background-color: rgb(245, 248, 250);
  			margin-top: 32px;
			text-align: center;
  			border-top: 1px solid #E9EEF1;
  			overflow: hidden;
		}
		.swal-modal {
			border-radius: 10px;
			width:400px;
		}
		.swal-button--confirm {
  			background-color: #6d50f0;
		}
		.swal-button--confirm:not([disabled]):hover{
			background-color:#5439ce;
		}
		.swal-content__input:focus{outline:none;border-color:#6d50f0;}
		.swal-content__input{border-radius: 10px;}
	</style>
	<!-- 代码框 -->
	<div id="myModal" class="modal">
		<!-- 代码框内容 -->
		<div class="modal-content">
			<div class="modal-header">
				<span>转换代码浏览</span>
				<span class="close">&times;</span>
			</div>
			<div class="modal-body">
				<pre readonly id="codeArea"></pre>
			</div>
		</div>
	</div>
	<style>
		#codeArea {
			height: 92vh;
			width: 100%;
			resize: none;
		}

		/* 代码框 (background) */
		.modal {
			display: none;
			/* 默认隐藏 */
			position: fixed;
			z-index: 1000;
			top: 0;
			left: 75vw;
			width: 25%;
			height: 100%;
			overflow: hidden;
			float: right;
		}

		/* 代码框内容 */
		.modal-content {
			position: relative;
			background-color: #fefefe;
			margin: 0 auto;
			padding: 0;
			border: 1px solid #888;
			width: 100%;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-webkit-animation-name: animateright;
			-webkit-animation-duration: 0.4s;
			animation-name: animateright;
			animation-duration: 0.4s	
		}

		/* 添加动画 */
		@-webkit-keyframes animateright {
			from {
				right: -300px;
				opacity: 0
			}

			to {
				right: 0;
				opacity: 1
			}
		}

		@keyframes animateright {
			from {
				right: -300px;
				opacity: 0
			}

			to {
				right: 0;
				opacity: 1
			}
		}

		/* 关闭按钮 */
		.close {
			color: white;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}

		.close:hover,
		.close:focus {
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

		.modal-header {
			padding: 8px 16px;
			background-color: #6d50f0;
			color: white;
		}

		.modal-body {
			padding: 2px 16px;
			overflow-y: auto;
			height: 75%;
		}
	</style>
	<script>

		function myUpdateFunction(event) {
			var code = Blockly.JavaScript.workspaceToCode(workspace);
			document.getElementById("codeArea").innerHTML = code;
            hljs.highlightBlock(document.getElementById("codeArea"))
		}
		workspace.addChangeListener(myUpdateFunction);

		var modal = document.getElementById('myModal');

		// 打开代码框的按钮对象
		var btn = document.getElementById("switch_code");

		// 获取 <span> 元素，用于关闭弹窗 that closes the modal
		var span = document.getElementsByClassName("close")[0];

		// 点击按钮打开代码框
		btn.onclick = function () {
			modal.style.display = "block";
		}

		// 点击 <span> (x), 关闭代码框
		span.onclick = function () {
			modal.style.display = "none";
		}
	</script>
    
	<!-- 新建浮窗 -->
	<div id="mynewsth" class="newsth">
		<!-- 新建浮窗内容 -->
		<div class="newsth-content">
			<div class="newsth-header">
				<img class="newsth-logo" width="40" src="{{static_url('img/files.svg')}}"></img>
				<span class="newsth-close">&times;</span>
			</div>
			<div class="newsth-body">
				<div class="card" onclick='newsth.style.display = "none";workspace.clear();'><span style="color: #6d50f0;line-height: 250px;font-weight: bold;
					font-size: 30px;">空白作品</span></div>
				<div class="card" onclick='swal("还没有呢～")'><span style="color: #6d50f0;line-height: 250px;font-weight: bold;
					font-size: 30px;">可见控件模版</span></div>
				<div class="card" onclick='newsth.style.display = "none";workspace.clear();Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);'><span style="color: #6d50f0;line-height: 250px;font-weight: bold;
					font-size: 30px;">不可见控件模版</span></div>
			</div>
		</div>
	</div>
	<style>
		/* 代码框 (background) */
		.newsth {
			display: none;
			/* 默认隐藏 */
			position: fixed;
			z-index: 1000;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			float: right;
			background-color: rgba(255, 255, 255, 0.25);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.18);
			box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
			-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
			color: rgba(255, 255, 255, 0.75);
		}

		/* 代码框内容 */
		.newsth-content {
			position: relative;
			border-radius: 10px;
			background-color: #fefefe;
			margin: 0 auto;
			width: 60vw;
			overflow: hidden;
			height: 75vh;
			top: 12.5vh;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-webkit-animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
			background-color: #666666;
		}
		
		.card {					
			display:inline-block;
			margin: 10px;
			width: 250px;
 			height: 250px;
 			background: rgb(255, 255, 255);
 			border-radius: 0.4em;
 			transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 			border: rgb(250, 250, 250) 0.2em solid;
		}	

		.card:hover {
 			border: #006fff 0.2em solid;
		}


		@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

		/* 关闭按钮 */
		.newsth-close {
			color: #6d50f0;
			font-weight: bold;
			font-size: 50px;
			float: right;
			position: relative;
			right: 4px;
			line-height:32px; 
		}
		.newsth-logo {
			position: relative;
			left: 10px;
		}

		.newsth-close:hover,
		.newsth-close:focus {
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

		.newsth-header {
			padding: 20px 16px;
			border-radius: 10px 10px 0 0;
			background-color: rgb(245, 248, 250);
			color: rgb(245, 248, 250);
		}

		.newsth-body {
			padding: 2px 16px;
			overflow-y: auto;
			overflow-x: hidden;
			height: 65vh;
			text-align: center;
		}
	</style>
	<script>
		var newsth = document.getElementById('mynewsth');

		// 获取 <span> 元素，用于关闭弹窗 that closes the newsth
		var newsthspan = document.getElementsByClassName("newsth-close")[0];

		// 点击 <span> (x), 关闭代码框
        newsthspan.onclick = function () {
			newsth.style.display = "none";
		}
	</script>
    <script>
        var theme = getCookie('mode')
    </script>
	<script>
        
		document.getElementById("table").style.height = (document.body.clientHeight - 57)
		document.getElementById("toolbox").style.height = (document.body.clientHeight - 57)
		Blockly.svgResize(workspace);
		var dark_url = "{{static_url('Waddle/custom_category_dark.js')}}"
		var light_url = "{{static_url('Waddle/custom_category.js')}}"
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari，旧版IE代码已删除
			xmlhttp = new XMLHttpRequest();
		}
		else {
			swal('你就别用了吧！你这浏览器不行啊！换一个或升级，谢谢！')
		}
		xmlhttp.open("GET", dark_url, false);
		xmlhttp.send();
		dark = xmlhttp.responseText;
		xmlhttp.open("GET", light_url, false);
		xmlhttp.send();
		light = xmlhttp.responseText;
		var sty = document.createElement('style');
		var to_dark = function () {
			document.getElementsByTagName("nav")[0].style.backgroundColor = "#525252"
			workspace.setTheme(DarkTheme);
			document.getElementById("moon-solid_3_").setAttribute('d','M37.246,131.693,32.052,103,3.313,97.817a4.016,4.016,0,0,1-2.59-6.243l16.65-23.955L.722,43.429a3.85,3.85,0,0,1,2.59-6l28.75-5.185,4.951-28.7A4.026,4.026,0,0,1,43.267.955L67.5,17.578,91.491.721a4.025,4.025,0,0,1,6.254,2.586L102.94,32l28.739,5.185a4.016,4.016,0,0,1,2.59,6.243l-16.65,23.955,16.663,24.19a4.02,4.02,0,0,1-2.6,6.245L102.941,103l-5.194,28.69a4.025,4.025,0,0,1-6.254,2.586l-24-16.622-24,16.623a4.021,4.021,0,0,1-6.254-2.586Zm-3.26-64.075A33.512,33.512,0,1,0,67.5,34.164,33.468,33.468,0,0,0,33.986,67.619ZM47,67.5A20.5,20.5,0,1,1,67.5,88,20.5,20.5,0,0,1,47,67.5Z');
            document.getElementById("moon-solid_3_").setAttribute('transform','translate(0 0)')
            document.getElementById("theme").setAttribute('width','27')
            document.getElementById("theme").setAttribute('height','27')
			sty.innerText = '.nav-item:hover{background-color: #666666;}.close:hover{color:#d9d9d9}';
			document.body.appendChild(sty);
			document.getElementsByClassName("modal-header")[0].style.backgroundColor = "#525252"
			document.getElementsByClassName("newsth-header")[0].style.backgroundColor = "#525252"
			document.getElementsByClassName("newsth-content")[0].style.backgroundColor = "#666666"
			eval(dark)
			document.cookie = "mode=dark";
			replacejscssfile("{{static_url('css/blockly_style.css')}}", "{{static_url('css/blockly_style_dark.css')}}", "css");
		}
		var to_light = function () {
			document.getElementsByTagName("nav")[0].style.backgroundColor = "#6d50f0"
			workspace.setTheme(WaddleTheme);
			document.getElementById("moon-solid_3_").setAttribute('d',"M32,98A65.973,65.973,0,0,1,97.941,32a79.615,79.615,0,0,1,12.051,1.1,3.1,3.1,0,0,1,.966,5.728,51.7,51.7,0,0,0,35.216,95.734,3.1,3.1,0,0,1,2.979,4.994A65.919,65.919,0,0,1,32,98Z");
            document.getElementById("moon-solid_3_").setAttribute('transform','translate(-32 -32)')
            document.getElementById("theme").setAttribute('width','23.5706')
            document.getElementById("theme").setAttribute('height','26.4')
			sty.innerText = '.nav-item:hover{background-color: #5439ce;};.close:hover{color:#000000}';
			document.body.appendChild(sty);
			document.getElementsByClassName("modal-header")[0].style.backgroundColor = "#6d50f0"
			document.getElementsByClassName("newsth-header")[0].style.backgroundColor = "#F5F8FA"
			document.getElementsByClassName("newsth-content")[0].style.backgroundColor = "#fff"
			eval(light)
			document.cookie = "mode=light";
			replacejscssfile("{{static_url('css/blockly_style_dark.css')}}", "{{static_url('css/blockly_style.css')}}", "css");
		}
		var switch_theme = function () {
			if (theme == "light") {
				to_dark()
				theme = "dark"
			} else {
				to_light()
				theme = "light"
			}
		}
		window.onresize = function () {
			document.getElementById("table").style.height = (document.body.clientHeight - 57)
			document.getElementById("toolbox").style.height = (document.body.clientHeight - 57)
			Blockly.svgResize(workspace);
		}
		if (theme == "dark") {
			to_dark()
		} else {
			if (theme == "light") {
				to_light()
			} else {
				if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
					to_dark()
				}
			}
		}
        hljs.initHighlightingOnLoad();
	</script>
</body>

</html>